<template>
  <div class="txzh-box">
    <div class="wxts-box">
      <span>温馨提示：为避免影响您的提现申请，请认真绑定并填写真实的有效信息！</span>
    </div>
    <div class="txzh-item" v-for="item in txzhList" :key="item" v-show="item.isShow">
      <span class="title">{{ item.name }}
        <span class="jiebang" v-if="isBind(item)" @click="unbindHandle(item)">解绑</span>
      </span>
      <div class="zh-item-box" v-if="!isBind(item)" @click="toBindZhanghu(item)">
        <span>添加{{ item.name }}账户</span>
        <img src="@/assets/icons/account_icon_add.png" alt="">
      </div>
      <div class="haszh-box" :style="{'background-color':item.backColor}" v-else>
        <img :src="item.img" alt="">
        <span>{{ item.data[item.showField] }}</span>
      </div>
    </div>
  </div>
</template>

<script>
import { onMounted, reactive, toRefs } from 'vue'
import { useStore } from 'vuex';
import api from '../api'
import { showConfirmDialog, showToast } from 'vant';
import { getStore, warningDeal } from '@/utils/utils';
import { useRoute, useRouter } from 'vue-router';
export default {
  setup() {
    const store = useStore()

    const route = useRoute()
    const router = useRouter()

    const state = reactive({
      txzhList: [
        {
          isShow: true,
          value: 1,
          name: '银行卡',
          showField: 'billNo',
          img: require('@/assets/icons/yhk-icon.png'),
          backColor: '#9FD699',
          data: {
            icName: null,
            icNo: null,
            billNo: null,
            billPhone: null,
          },
        },
        {
          isShow: false,
          value: 2,
          name: '支付宝',
          showField: 'aliLoginAccount',
          img: require('@/assets/icons/zfb-icon.png'),
          backColor: '#5C9CFB',
          data: {
            icName: null,
            icNo: null,
            aliLoginAccount: null,
            aliRealName: null,
          },
        },
        {
          isShow: false,
          value: 3,
          name: '微信',
          showField: 'wxNickName',
          img: require('@/assets/icons/wx-icon.png'),
          backColor: '#28C445',
          data: {
            icName: null,
            icNo: null,
            wxNickName: null,
            wxRealName: null,
          },
        },
      ],
    })

    function getZhanghu() {
      const obj = {
        shopId: getStore('USER_INFO').companyId
      }
      api.getAccount(obj).then(res => {
        if (res.code == '200') {
          setData(res.data)
        } else {
          showToast(res.msg)
        }
      }).catch(err => {
        console.log(err)
      })
    }

    function setData(data) {
      state.txzhList && state.txzhList.map(item => {
        for (const key in item.data) {
          item.data[key] = data[key]
        }
      })
    }

    function isBind(data = {}) {
      let is = !!data.data[data.showField]
      return is
    }

    function unbindHandle(data) {
      switch (data.value) {
        case 1:
          //银行卡
          showConfirmDialog({
            title: '是否确认解绑',
            message:
              '解绑后提现时需要重新绑定账户',
          })
            .then(() => {
              // on confirm
              unbindBank()
            })
            .catch(() => {
              // on cancel
            });
          break
      }
    }

    function unbindBank() {
      const obj = {

      }
      api.unbindBank(obj).then(res => {
        if (res.code == '200') {
          getZhanghu()
        } else {
          showToast(res.msg)
        }
      }).catch(err => {
        console.log(err)
      })
    }

    function toBindZhanghu(data) {
      router.push({ path: '/more/bindZhanghu', query: { type: data.value } })
    }

    onMounted(() => {
      store.commit("setNavBar", {
        title: '提现账户',
        show: true,
        left: true,
        leftType: 'back',
        right: false,
        rightType: 'search',
        path: '/index/uploadData'
      })
      getZhanghu()
    })

    return {
      ...toRefs(state),
      isBind,
      unbindHandle,
      toBindZhanghu,
    }
  }
}
</script>

<style lang="scss" scoped>
.txzh-box {
  .wxts-box {
    box-sizing: border-box;
    padding: 20px;
    font-size: 10px;
    color: #666666;
  }
  .txzh-item {
    box-sizing: border-box;
    padding: 20px;
    background-color: #ffffff;
    margin-bottom: 10px;
    > .title {
      font-size: 14px;
      color: #000000;
      display: flex;
      align-items: center;
      .jiebang {
        margin-left: auto;
        font-size: 12px;
        color: #666666;
      }
    }
    .zh-item-box {
      display: flex;
      align-items: center;
      box-sizing: border-box;
      padding: 15px;
      border: 1px solid #aaaaaa;
      margin-top: 20px;
      > span {
        font-size: 12px;
        color: #424242;
      }
      > img {
        margin-left: auto;
        width: 20px;
      }
    }
    .haszh-box {
      margin-top: 20px;
      box-sizing: border-box;
      padding: 15px;
      border-radius: 5px;
      display: flex;
      align-items: center;
      gap: 10px;
      > img {
        width: 40px;
      }
      > span {
        font-size: 16px;
        color: #ffffff;
      }
    }
  }
}
</style>